<template>
  <div>
    <div class="head">
      <p class="text">我的个人资料</p>
      <van-icon
        @click="onClickLeft()"
        class="arrow"
        size="20"
        color="whitesmoke"
        name="arrow-left"
      />
    </div>
    <div class="box">
      <p class="p1">信息资料</p>
      <p class="p2">等级：LV0</p>
      <p class="p2">性别：未填写</p>
      <p class="p2">城市：未填写</p>
      <p class="p2">年龄：未填写</p>
      <p class="p2">星座：未填写</p>
    </div>
    <div class="box">
      <p class="p1">个人签名</p>
      <p class="p2">这个人很懒，什么都没写</p>
    </div>
    <div class="box">
      <p class="p1">注册时长</p>
      <p class="p2">已经31天了</p>
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    onClickLeft() {
      this.$router.push('/detail');
    },
  },
};
</script>
<style scoped>
.head {
  width: 100%;
  height: 4rem;
  background-color: rgb(108, 144, 243);
}
.text {
  text-align: center;
  font-size: 1.6rem;
  color: whitesmoke;
  line-height: 4rem;
}
.arrow {
  position: absolute;
  top: 1.1rem;
}
.p1 {
  font-size: 1.8rem;
  color: rgb(41, 41, 40);
}
.p2 {
  font-size: 1.6rem;
  color: #cccccc;
}
.box {
  width: 90%;
  margin-left: 2rem;
  margin-top: 3rem;
}
</style>